<template>
    <div class="signinput signin_phone">
        <div id="loadingDiv" class="loadingDiv" style="display:none" ref="loadingDiv">
            <p>加载中</p>
        </div>
        <ul class="loginUl" v-show="!isShowReg">
            <li>
                <label>
                    <div class="phone">
                        <img src="../../../images/ksbao/phoneL.png" alt="手机" />
                    </div>
                    <input type="tel" placeholder="输入手机号" maxlength='11' v-model="formAction.username" v-on:blur="checkPhoneIsRegedited" />
                </label>
                <div id="captcha"></div>
            </li>
            <li class="txyz">
                <label>
                    <div class="phone">
                        <img src="../../../images/ksbao/yanzheng.png" alt="手机" />
                    </div>
                    <input type="tel" placeholder="输入验证码" maxlength='6' v-model="formAction.verifyCode" />
                    <strong @click="refreshCode"><img :src="imgverify" alt="点击刷新验证码" /></strong>
                </label>
            </li>
        </ul>
        <ul class="loginUl" v-show="isShowReg">
            <li class="verrifi">
                <label>
                    <div>
                        <img src="../../../images/ksbao/yanzheng.png" alt="手机" />
                    </div>
                    <input type="tel" v-model="formAction.shortMsg" maxlength="6" placeholder="输入短信验证码" />
                </label>
            </li>
            <li>
                <label>
                    <div>
                        <img src="../../../images/ksbao/mima.png" alt="手机" />
                    </div>
                    <input type="password" v-show="darkBright" v-model="formAction.password" placeholder="输入密码" />
                    <input type="text" v-show="!darkBright" v-model="formAction.password" placeholder="输入密码" />
                    <em @click="showPWDText"><img src="../../../images/ksbao/pwdshow.png" alt="显示密码" ref="darkBrightImg" /></em>
                </label>
            </li>
        </ul>
        <button @click="nextSubBtn" v-show="!isShowReg" ref="nextSubmit">下一步</button>
        <button @click="submitRegist" v-show="isShowReg" v-text="reType === 'regist' ? '立即注册' : '重置密码'"></button>
        <!-- <div class="gvrp" v-show="isRegShow">注册即表示您同意<span id="gvrpBtn" @click="showAgreenment">《考试宝典使用协议》</span></div> -->
    </div>
</template>
<script>
import { checkUser, register, resetpwd, refreshVerify, checkVerifyCode } from "../../../config/getData"
import { checkCellPhone } from "../../../config/mUtils"
export default {
    props: {
        isRegShow: true, // 是否是注册
        reType: '', // 当前状态 [register/restorePassword]
        showSubMenu: false, // 是否显示协议
    },
    data: function() {
        return {
            isPossibleSubmit: false, // 是否可提交
            isDoubbleClick: true, // 防止重复点击
            formAction: { // 表单
                username: '',
                password: '',
                verifyCode: '',
                shortMsg: ''
            },
            darkBright: true, // 是否显示明文密码
            // validateData: '', // 云盾提交码
            countdown: 60, // 发信息到手机的秒数，60s内不能再次点击
            countdownCheck: 0, // 发信息到手机的秒数，60s内不能再次点击

            imgverifyGuid: null, // 验证码字符串
            imgverify: null, // 验证码图片地址
            isShowReg: false, // 是否显示立即注册
            isRegedPhone: null // 是否可以下一步
        }
    },
    methods: {
        showPWDText(event) {
            // 显示隐藏密码
            this.darkBright = !this.darkBright;
            this.$refs.darkBrightImg.src = this.darkBright ? require('images/ksbao/pwdshow.png') : require('images/ksbao/pwdhide.png');
        },
        showAgreenment() {
            // 给父组件传递显示协议信号
            this.$emit('changeHidden', true);
        },
        async refreshCode() {
            let _that = this;
            await refreshVerify().then(res => {
                if (res && res.status == 200) {
                    _that.imgverifyGuid = res.data;
                    _that.imgverify = 'http://121.199.11.87:8118/VerificationCode/CreateVerificationCode/?guid=' + res.data;
                }
            });
        },
        parengtChange(value) {
            // 父组件改变值后初始化验证码插件
            if (!value) {
                this.resetFormAction();
            }
        },
        resetFormAction() {
            // 重置注册状态
            this.formAction.username = '';
            this.formAction.password = '';
            this.formAction.verifyCode = '';
            this.formAction.shortMsg = '';
            this.isShowReg = false;
            this.isRegedPhone = null;
            this.refreshCode();
        },
        nextSubBtn() {
            // 下一步 && 发送验证码
            var _that = this;
            if (!_that.isShowReg) {
                if (_that.countdownCheck > 0) {
                    return;
                }
                if (_that.formAction.username === '') {
                    _that.$vux.toast.show({ text: '请输入手机号码' });
                    return;
                }
                if (!checkCellPhone(_that.formAction.username)) {
                    _that.$vux.toast.show({ text: '请输入正确的手机号码' });
                    return;
                }
                if (!_that.isRegedPhone) {
                    if (_that.reType === 'regist') {
                        _that.$vux.toast.show({ text: '该号码已被注册' });
                    } else if (_that.reType === 'restorePassword') {
                        _that.$vux.toast.show({ text: '该号码未注册' });
                    }
                    return;
                }
                if (_that.formAction.verifyCode == '') {
                    _that.$vux.toast.show({ text: '请输入图片验证码' });
                    return;
                }
                if (_that.formAction.verifyCode.length !== 4) {
                    _that.$vux.toast.show({ text: '请输入4位数图片验证码' });
                    return;
                }
                _that.senderifyCode();
                return;
            }
        },
        submitRegist() {
            if (this.reType === 'regist') {
                this.userRegister();
            } else if (this.reType === 'restorePassword') {
                this.userReset();
            }
        },
        async userReset() {
            // 找回密码
            var _that = this;
            if (_that.formAction.shortMsg == '') {
                _that.$vux.toast.show({ text: '请输入短信验证码' });
                return;
            }
            if (_that.formAction.shortMsg.length !== 6) {
                _that.$vux.toast.show({ text: '请输入6位数短信验证码' });
                return;
            }
            if (_that.formAction.password == '') {
                _that.$vux.toast.show({ text: '请输入密码' });
                return;
            }
            if (_that.formAction.password.length < 6 || _that.formAction.password.length > 16) {
                _that.$vux.toast.show({ text: '密码必须在6-16个字符之间' });
                return;
            }
            if (_that.isDoubbleClick) {
                _that.isDoubbleClick = false; // 防止重复提交
                _that.$refs.loadingDiv.style.display = 'block';
                await resetpwd(_that.formAction.username, _that.formAction.password, _that.formAction.shortMsg).then(res => {
                    _that.isDoubbleClick = true;
                    _that.$refs.loadingDiv.style.display = 'none';
                    switch (res.status) {
                        case 200:
                            _that.$vux.toast.show({ text: '密码修改成功，请你重新登录！', width: '70%' });
                            _that.$router.push('/login');
                            break;
                        case 300:
                            _that.$vux.toast.show({ text: '短信验证码不正确' });
                            _that.formAction.shortMsg = '';
                            break;
                        default:
                            _that.resetFormAction();
                            _that.$vux.toast.show({ text: res.msg });
                            break;
                    }
                });
            }
        },
        async userRegister() {
            // 注册
            var _that = this;
            if (_that.formAction.shortMsg == '') {
                _that.$vux.toast.show({ text: '请输入短信验证码' });
                return;
            }
            if (_that.formAction.shortMsg.length !== 6) {
                _that.$vux.toast.show({ text: '请输入6位数短信验证码' });
                return;
            }
            if (_that.formAction.password == '') {
                _that.$vux.toast.show({ text: '请输入密码' });
                return;
            }
            if (_that.formAction.password.length < 6 || _that.formAction.password.length > 16) {
                _that.$vux.toast.show({ text: '密码必须在6-16个字符之间' });
                return;
            }
            if (_that.isDoubbleClick) {
                _that.isDoubbleClick = false; // 防止重复提交
                _that.$refs.loadingDiv.style.display = 'block';
                await register(_that.formAction.username, _that.formAction.password, _that.formAction.shortMsg).then(res => {
                    _that.isDoubbleClick = true;
                    _that.$refs.loadingDiv.style.display = 'none';
                    switch (res.status) {
                        case 200:
                            _that.$vux.toast.show({ text: res.msg });
                            _that.$emit('changeReg', true);
                            break;
                        case 201:
                            _that.$vux.toast.show({ text: '该帐号已被注册，请您重新注册' });
                            _that.resetFormAction();
                            break;
                        case 202:
                            _that.$vux.toast.show({ text: '注册时间超时，请您重新注册' });
                            _that.resetFormAction();
                            break;
                        case 203:
                            _that.$vux.toast.show({ text: '短信验证码不正确' });
                            _that.formAction.shortMsg = '';
                            break;
                        default:
                            _that.resetFormAction();
                            _that.$vux.toast.show({ text: res.msg });
                            break;
                    }
                });
            }
        },
        async senderifyCode() {
            // 发送验证码
            console.log(111);
            let _that = this;
            await checkVerifyCode(_that.formAction.verifyCode, _that.imgverifyGuid, _that.formAction.username, _that.reType, 0).then(res => {
                switch (res.status) {
                    case 200:
                        _that.$vux.toast.show({ text: '短信验证码已发送' });
                        _that.setCountDownTime();
                        _that.isShowReg = true;
                        break;
                    case 202:
                        _that.isShowReg = true;
                        _that.$vux.toast.show({ text: '短信验证码已经发送' });
                        break;
                    case 201:
                    case 300:
                    case 400:
                        _that.$vux.toast.show({ text: res.msg });
                        _that.formAction.verifyCode = '';
                        _that.refreshCode();
                        break;
                    default:
                        _that.resetFormAction();
                        _that.$vux.toast.show({ text: res.msg });
                        break;
                }
            });
        },
        setCountDownTime() {
            // 60秒获取短信验证码
            var _that = this,
                $elem = _that.$refs.nextSubmit;
            if (_that.countdown === 0) {
                $elem.innerHTML = '下一步';
                _that.countdown = 60;
                return;
            } else {
                $elem.innerHTML = _that.countdown + 's后重新获取';
                _that.countdown--;
                _that.countdownCheck = _that.countdown;
            }
            setTimeout(function() {
                _that.setCountDownTime();
            }, 1000)
        },
        async checkPhoneIsRegedited() {
            // 检测手机是否已注册
            var _that = this;
            if (_that.formAction.username === '') {
                _that.$vux.toast.show({ text: '请输入手机号码' });
                return;
            }
            if (!checkCellPhone(_that.formAction.username)) {
                _that.$vux.toast.show({ text: '请输入正确的手机号码' });
                return;
            }
            await checkUser(_that.formAction.username).then(res => {
                // body
                if (res.status === 200) {
                    if (_that.reType === 'regist') {
                        _that.isRegedPhone = false;
                        _that.$vux.toast.show({ text: '该号码已被注册' });
                    } else if (_that.reType === 'restorePassword') {
                        _that.isRegedPhone = true;
                    }
                } else if (res.status === 201) {
                    if (_that.reType === 'regist') {
                        _that.isRegedPhone = true;
                    } else if (_that.reType === 'restorePassword') {
                        _that.$vux.toast.show({ text: '该号码未注册' });
                        _that.isRegedPhone = false;
                    }
                }
            });
        }
    },
    created: function() {
        this.refreshCode();
    },
    mounted: function() {}
}

</script>
